<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-排位赛-试卷列表'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="header">
              <view class="title">
                <view class="title_content"> 试卷列表 </view>
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg2.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
              <view class="tabs">
                <view
                  class="tabs_content"
                  :class="{ active: type === '1' }"
                  @click="getPage('1')"
                >
                  单词听写
                </view>
                <view
                  class="tabs_content"
                  :class="{ active: type === '2' }"
                  @click="getPage('2')"
                >
                  单词听选
                </view>
                <view
                  class="tabs_content"
                  :class="{ active: type === '3' }"
                  @click="getPage('3')"
                >
                  模考真题
                </view>
              </view>
            </view>
            <view class="section">
              <view class="table">
                <u-table
                  bg-color="#6EC5FF"
                  border-color="#ffffff"
                  font-size="24"
                  color="#ffffff"
                  padding="20rpx 0"
                >
                  <u-tr>
                    <u-th width="30%">试卷名称</u-th>
                    <u-th width="10%">教材</u-th>
                    <u-th>参赛人数</u-th>
                    <u-th>排名</u-th>
                    <u-th>个人得分</u-th>
                    <u-th>最高得分</u-th>
                    <u-th>最低得分</u-th>
                    <u-th>用时</u-th>
                    <u-th>金币变化</u-th>
                    <u-th>段位变化</u-th>
                    <u-th width="20%">评测时间</u-th>
                    <u-th>操作</u-th>
                  </u-tr>
                  <u-tr v-for="(item, index) in taleList" :key="index">
                    <u-td width="30%">{{ item.title }}</u-td>
                    <u-td width="10%">{{ item.bookYear }}</u-td>
                    <u-td>{{ item.partInNum }}</u-td>
                    <u-td>{{ item.myRank }}</u-td>
                    <u-td>{{ item.gotScore }}</u-td>
                    <u-td>{{ item.winScore }}</u-td>
                    <u-td>{{ item.loseScore }}</u-td>
                    <u-td>{{ item.examDuration }}</u-td>
                    <u-td>{{ item.gotGold }}</u-td>
                    <u-td>{{ item.gotRankLevel }}</u-td>
                    <u-td width="20%">{{ item.startTime }}</u-td>
                    <u-td>
                      <view
                        class="button"
                        v-if="type === '3'"
                        @click="handleReport(item)"
                      >
                        <text>打开</text>
                      </view>
                      <view class="button" v-else>
                        <text>--</text>
                      </view>
                    </u-td>
                  </u-tr>
                </u-table>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { taskUserExamPage } from "@/api/task";
export default {
  components: {},
  filters: {
    gameCategoryFilter(status) {
      const statusMap = {
        1: "1v1",
        2: "2v2",
        3: "3v3",
      };
      return statusMap[status];
    },
    winFilter(status) {
      const statusMap = {
        Y: "胜利",
        N: "失败",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      taleList: [],
      queryParams: {
        current: 1,
        size: 20,
      },
      total: 0,
      type: "1",
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.getPage();
    },
    getPage(type) {
      if (this.type === type) return;
      if (type) {
        this.type = type;
        this.queryParams = {
          current: 1,
          size: 20,
        };
      }
      let params = {
        gameType: "3",
        examType: this.type,
      };
      taskUserExamPage(this.queryParams, params).then((res) => {
        this.taleList = res.data.records;
        this.total = res.data.total;
      });
    },
    handleCurrentChange() {
      this.getPage();
    },
    handleReport(row) {
      uni.navigateTo({
        url: `/pages/task/rank/rankReport?id=${row.id}`,
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./rankList.scss";
</style>
